<!--医嘱信息tabs-->
<script setup lang="ts">

defineOptions({
  name: 'CpoeIndex'
})

// 伪注册
const componentList = {
  CpoeInfo: defineAsyncComponent(() => import("@/views/doctorStation/component/cpoeTabs/cpoeInfo/index.vue")),
  Record: defineAsyncComponent(() => import("@/views/doctorStation/component/cpoeTabs/record/index.vue")),
  RecordInfo: defineAsyncComponent(() => import("@/views/doctorStation/component/cpoeTabs/recordInfo/index.vue")),
  DataList: defineAsyncComponent(() => import("@/views/doctorStation/component/cpoeTabs/dataList/index.vue")),
}

const tabs = reactive([
  {
    name: 'CpoeInfo',
    label: '医嘱信息'
  },
  {
    name: 'Record',
    label: '电子病历'
  },
  {
    name: 'RecordInfo',
    label: '病历信息'
  },
  {
    name: 'DataList',
    label: '已发送单据列表'
  }
])

const activeName = ref('CpoeInfo');
const activeComponent = computed(() => {
  return componentList[activeName.value as keyof typeof componentList]
});

</script>

<template>
  <div class="cpoeIndex height-100">
    <div class="form flex ac pt5 pb5 pl5">
      <span>费别:</span>
      <el-input class="underline"></el-input>
      <span class="ml10">付款:</span>
      <el-input class="underline" disabled></el-input>
      <span class="ml10">号类:</span>
      <el-input class="underline" disabled></el-input>
      <el-button class="ml10" plain type="primary">修改诊断</el-button>
      <span class="ml10">诊断:</span>
      <el-input class="underline" disabled></el-input>
    </div>
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane v-for="item in tabs" :key="item.name" :label="item.label" :name="item.name"></el-tab-pane>
      <component class="component" :is="activeComponent"></component>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.cpoeIndex {
  .form {
    background-color: var(--el-fill-color-light);
    span {
      width: 40px;
    }
  }
  .underline {
    &.el-input {
      width: 200px;
      box-shadow: none;
      :deep(.el-input__wrapper) {
        box-shadow: none;
        border-bottom: solid;
        border-radius: 0;
        background-color: transparent;
      }
      :deep(.el-input__inner) {
        cursor: pointer;
      }
    }
  }

  :deep(.el-tabs) {
    height: calc(100% - 43.5px);
    .el-tabs__content {
      height: calc(100% - 69px);
    }
  }

  .component {
    height: 100%;
  }
}
</style>
